<!doctype html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <!-- <script src="/static/js/tailwindcss-3.4.5.js"></script> -->
</head>

<body>
  <div id="app" class="container">
    <template v-if="!logined">
      <div class="alert alert-danger" role="alert">
        <div class="mb-3">
          <input class="form-control" type="text" placeholder="用户名" aria-label="default input example"
            v-model="username">
        </div>
        <div class="mb-3">
          <input class="form-control" type="text" placeholder="密码" aria-label="default input example"
            v-model="password">
        </div>

        <button @click="login" class="btn btn-primary">登录</button>
      </div>
    </template>
    <template v-else-if="logined">
      <div class="alert alert-success" role="alert">
        ({{ username}}) 已登录.
      </div>

      <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <button class="nav-link active" id="nav-member-tab" data-bs-toggle="tab" data-bs-target="#nav-member"
            type="button" role="tab" aria-controls="nav-member" aria-selected="true">成员管理</button>
          <button class="nav-link" id="nav-device-tab" data-bs-toggle="tab" data-bs-target="#nav-device" type="button"
            role="tab" aria-controls="nav-device" aria-selected="false">设备管理</button>
        </div>
      </nav>
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-member" role="tabpanel" aria-labelledby="nav-member-tab"
          tabindex="0">
          <div class="">
            <div>
              <button @click="show_register_member_modal()" class="btn btn-info float-end">注册新成员</button>
            </div>
            <table class="table table-fluid">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>特征值长度</th>
                  <th>识别照片</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tr v-for="item in members">
                <td>{{ item.full_name }}</td>
                <td>{{ item.gender }}</td>
                <td>{{ item.face_feature_size }}</td>
                <td><img :src="item.image_path" width="100" height="100" /></td>
                <td><button @click="issue_member(item.id)" class="btn btn-primary">下发</button></td>
                <td><button @click="delete_member(item.id)" class="btn btn-danger">删除</button></td>
              </tr>
            </table>
          </div>


        </div>
        <div class="tab-pane fade" id="nav-device" role="tabpanel" aria-labelledby="nav-device-tab" tabindex="0">
          <div>
            <button @click="show_register_device_modal()" class="btn btn-info float-end">注册新设备</button>
          </div>
          <table class="table table-fluid">
            <thead>
              <tr>
                <th>device_id</th>
                <th>device_name</th>
                <th>device_ip</th>
                <th>device_port</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tr v-for="item in devices">
              <td>{{ item.id }}</td>
              <td>{{ item.device_name }}</td>
              <td>{{ item.server_ip }}</td>
              <td>{{ item.server_port }}</td>
              <td><button @click="issue_device(item.id)" class="btn btn-primary">下发</button></td>
              <td><button @click="delete_device(item.id)" class="btn btn-warning">删除</button></td>
            </tr>
          </table>
        </div>
      </div>

    </template>

    <!-- Register Member Modal -->
    <div class="modal fade" id="registerMemberModal" tabindex="-1" aria-labelledby="registerMemberLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">注册新成员</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="card">
              <img :src="demo_image_url" class="card-img-top img-fluid img-thumbnail" style="height: 18rem;" alt="">
              <input type="file" name="file" @change="handleFileChange">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">年龄: <span>{{ age }}</span></li>
                <li class="list-group-item">性别: <span>{{ gender }}</span></li>
                <li class="list-group-item">特征值长度: <span>{{ face_feature_size }}</span></li>
              </ul>
              <div class="card-body" v-if="face_feature_size > 0">
                <div class="mb-3">
                  <input class="form-control" type="text" placeholder="请输入姓名" aria-label="default input example"
                    v-model="full_name">
                </div>
                <div class="mb-3">
                  <input class="form-control" type="text" placeholder="请输入备注" aria-label="default input example"
                    v-model="memo">
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click.prevent="register_member()">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Register Device Modal -->
    <div class="modal fade" id="registerDeviceModal" tabindex="-1" aria-labelledby="registerDeviceLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">注册新设备</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="card">
              <div class="card-body">
                <div class="mb-3"></div>
                设备名称
                <input class="form-control" type="text" placeholder="" aria-label="default input example"
                  v-model="device_info.name">
              </div>
              <div class="mb-3">
                设备类型
                <select class="form-select" aria-label="Default select example" v-model="device_info.type">
                  <option selected value="0">RTSP设备</option>
                </select>

              </div>
              <div class="mb-3">
                设备IP
                <input class="form-control" type="text" placeholder="" aria-label="default input example"
                  v-model="device_info.ip">
              </div>
              <div class="mb-3">
                设备端口
                <input class="form-control" type="text" placeholder="" aria-label="default input example"
                  v-model="device_info.port">
              </div>
              <div class="mb-3">
                设备用户名
                <input class="form-control" type="text" placeholder="" aria-label="default input example"
                  v-model="device_info.username">
              </div>
              <div class="mb-3">
                设备密码
                <input class="form-control" type="text" placeholder="" aria-label="default input example"
                  v-model="device_info.password">
              </div>
              <div class="mb-3">
                流媒体地址
                <input class="form-control" type="text" placeholder="" aria-label="default input example"
                  v-model="device_info.url_suffix">
              </div>
              <div>
                组合后的URL:
                rtsp://{{device_info.username}}:{{device_info.password}}@{{device_info.ip}}:{{device_info.port}}/{{device_info.url_suffix}}
              </div>

            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" @click.prevent="register_device()">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Toast -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div id="liveToast" class="toast" :class="toast_text_bg_class" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
          {{ toast_message }}
        </div>
      </div>
    </div>
   
  </div>

  

  <script src="/static/js/bootstrap.bundle.min.js"></script>
  <script src="/static/js/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    var vm = createApp({
      setup() {
        const message = ref('Hello vue!!!');
        const selectedFile = ref('...');
        const demo_image_url = ref('');
        const age = ref('');
        const gender = ref('');
        const angel_pitch = ref('');
        const angel_roll = ref('');
        const angel_yaw = ref('')
        const face_feature = ref('');
        const face_feature_size = ref(0);
        const responseData = ref(null);
        const full_name = ref(null);
        const memo = ref(null);
        const members = ref(null);
        const devices = ref(null);
        const logined = ref(false);
        const username = ref('admin');
        const password = ref('123456');
        const show_register_form = ref(false);
        const modal_register_member = ref(null);
        const modal_register_device = ref(null);
        const device_info = ref({
          name: '',
          type: '0',
          ip: '',
          port: '',
          username: '',
          password: '',
          url_suffix: ''
        });
        const toast_message = ref('');
        const toast_text_bg_class = ref('text-bg-success');

        return {
          logined,
          message,
          selectedFile,
          demo_image_url,
          age,
          gender,
          face_feature,
          face_feature_size,
          angel_pitch,
          angel_roll,
          angel_yaw,
          responseData,
          full_name,
          memo,
          members,
          username,
          password,
          show_register_form,
          modal_register_member,
          modal_register_device,
          device_info,
          devices,
          toast_message,
          toast_text_bg_class
        }
      },
      methods: {
        handleFileChange(e) {
          this.selectedFile = e.target.files[0];
          this.submitForm();
        },
        submitForm() {
          const formData = new FormData();
          formData.append('file', this.selectedFile, this.selectedFile.name);

          fetch('/upload_file', {
            method: 'POST',
            body: formData
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              console.log(data);
              this.age = data.age;
              this.gender = data.gender;
              this.angel_pitch = data.face_angel_pitch;
              this.angel_roll = data.face_angel_roll;
              this.angel_yaw = data.face_angel_yaw;
              this.face_feature = data.face_feature;
              this.face_feature_size = parseInt(data.face_feature_size);
              this.demo_image_url = data.errmsg;
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        login() {
          const formData = new FormData();
          formData.append('username', this.username);
          formData.append('password', this.password);

          fetch('/login', {
            method: 'POST',
            body: formData
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              console.log(data);
              this.logined = data.errcode == 0;
              console.log(this.logined);
              this.search_members(); // 页面加载时调用该函数来初始化数据
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        show_register_member_modal: function (event) {
          //显示注册会员的表单
          this.modal_register_member.show();
        },
        show_register_device_modal: function (event) {
          //显示注册设备的表单
          this.modal_register_device.show();
        },
        show_toast_modal: function (msg) {
          //显示toast
          this.toast_message = msg
          // this.toast_text_bg_class = 'text-bg-success'
          // this.toast_text_bg_class = 'text-bg-danger'
          new bootstrap.Toast(document.querySelector('.toast')).show();
        },
        register_member: function (event) {
          const headers = new Headers()
          headers.append('Content-Type', 'application/json')

          params = {
            "full_name": this.full_name,
            "memo": this.memo,
            "face_feature": this.face_feature,
            "face_feature_size": this.face_feature_size,
            "image_path": this.demo_image_url,
            "gender": this.gender
          }
          const body = JSON.stringify(params)

          fetch('/api/v1/member', {
            method: 'POST',
            headers: headers,
            'body': body
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              if (data.errcode == 0) {
                // 保存成功
                this.modal_register_member.hide();
                this.search_members();
                this.show_toast_modal('新成员创建成功');
              } else {
                // 保存失败
              }

            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        register_device: function (event) {
          const headers = new Headers()
          headers.append('Content-Type', 'application/json')

          params = {
            "device_name": this.device_info.name,
            "device_type": this.device_info.type,
            "server_ip": this.device_info.ip,
            "server_port": this.device_info.port,
            "device_username": this.device_info.username,
            "device_password": this.device_info.password,
            "device_url_suffix": this.device_info.url_suffix
          }
          const body = JSON.stringify(params)

          fetch('/api/v1/device', {
            method: 'POST',
            headers: headers,
            'body': body
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              if (data.errcode == 0) {
                // 保存成功
                this.modal_register_device.hide();
                this.search_devices();
                this.show_toast_modal('新设备创建成功');
              } else {
                // 保存失败
              }

            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        search_members: function () {
          fetch('/api/v1/members', {
            method: 'GET',
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              // console.log(data);
              this.members = data;
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        search_devices: function () {
          fetch('/api/v1/devices', {
            method: 'GET',
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              this.devices = data;
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        issue_member: function (member_id) {
          url = '/api/v1/member/' + member_id + '/issue'
          console.log(url)
          fetch(url, {
            method: 'GET',
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              console.log(data);
              if (data.errcode == 0) {
                // 成员下发成功
                this.show_toast_modal('Member issue success');
              } else {
                // 删除失败
                console.log(data);
                this.show_toast_modal('成员信息下发失败：' + data.errmsg);
              }
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        issue_device: function (member_id) {
          url = '/api/v1/device/' + member_id + '/issue'
          console.log(url)
          fetch(url, {
            method: 'GET',
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              if (data.errcode == 0) {
                // 删除成功
                this.show_toast_modal("设备" + device_id + "下发成功");
              } else {
                // 保存失败
                console.log(data.errmsg);
                this.show_toast_modal("设备" + device_id + "下发...失败");
              }
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        delete_device: function (device_id) {
          url = '/api/v1/device/' + device_id + '/delete'
          // console.log(url)
          fetch(url, {
            method: 'POST',
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              if (data.errcode == 0) {
                // 删除成功
                this.show_toast_modal("设备" + device_id + "删除成功");
                this.search_devices();
              } else {
                // 保存失败
                this.show_toast_modal("设备" + device_id + "删除...失败");
              }
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        delete_member: function (member_id) {
          url = '/api/v1/member/' + member_id + '/delete'
          fetch(url, {
            method: 'POST',
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              console.log(data);
              if (data.errcode == 0) {
                // 删除成功
                this.show_toast_modal("成员" + member_id + "删除成功");
                this.search_members();
              } else {
                // 保存失败
                this.show_toast_modal("成员" + member_id + "删除...失败");
              }
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
        check_login_status() {
          fetch('/login_status', {
            method: 'GET'
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              // console.log(data);
              this.logined = data.errcode == 0;
              this.username = data.username;
              // console.log(this.logined);
              this.search_members(); // 页面加载时调用该函数来初始化数据
              this.search_devices();
            })
            .catch(error => console.log(error)); // 处理错误情况
        },
      },
      mounted() {
        this.check_login_status(); // 页面加载时调用该函数来初始化数据
        this.modal_register_member = new bootstrap.Modal('#registerMemberModal', {})
        this.modal_register_device = new bootstrap.Modal('#registerDeviceModal', {})
      }
    }).mount('#app')
  </script>
</body>

</html>